/* eslint-disable react/jsx-indent */
import React, { PureComponent } from 'react';
import { Card, Col, Timeline, Tag ,Empty} from 'antd';
import moment from 'moment';
import _ from 'lodash';

class HdlRemark extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
      proRecording: [],
      dataArr: [],
    };
  }

  static getDerivedStateFromProps(nextProps) {
    if (!nextProps.proRecording) return null;
    if ('proRecording' in nextProps) {
      return {
        proRecording: nextProps.proRecording,
        dataArr: _.cloneDeep(nextProps.proRecording).splice(0, 2),
      };
    }
    return null;
  }

  loadingMore = flag => {
    this.setState({
      flag: !flag,
    });
  };

  render() {
    const { flag, proRecording, dataArr } = this.state;
    return (
      <div>
        <Card
          title={
            <span style={{ fontWeight: 'bolder' }} id="proRecording">
              问题记录
            </span>
          }
          bordered={false}
        >
          {proRecording.length
            ? (flag ? proRecording : dataArr).map(h => (
                <Col style={{ marginBottom: !h.probFdbks ? 30 : 0 }}>
                  <p>
                    <span>{h.creTime ? moment(h.creTime).format('YYYY-MM-DD HH:mm') : '--'}</span>
                    <span style={{ display: 'inline-block', margin: '0 5px' }}>{h.creName}</span>
                    <span style={{ color: String(h.probFlag) === '1' ? 'red' : 'green' }}>
                      {h.probFlagName}
                    </span>
                  </p>
                  <p>
                    <Tag color="blue">{h.probObjName}</Tag>
                    <span>
                      {h.probTypeName}
                      {`/${h.probTypeDesc}`}
                    </span>
                  </p>
                  <Timeline>
                    {h.probFdbks.map(item => (
                      <Timeline.Item>
                        <p>
                          <span style={{ marginRight: 18 }}>
                            {item.creTime ? moment(item.creTime).format('YYYY-MM-DD HH:mm') : '--'}
                          </span>
                          <span>{item.creName}</span>
                        </p>
                        <p>{item.content}</p>
                      </Timeline.Item>
                    ))}
                  </Timeline>
                </Col>
              ))
            : <Empty/>}
          {proRecording.length > 2 && (
            <p
              style={{
                width: 132,
                height: 28,
                textAlign: 'center',
                border: '1px solid #ccc',
                margin: '10px auto 0',
                lineHeight: '26px',
                cursor: 'pointer',
                borderRadius: '4px',
              }}
              onClick={() => this.loadingMore(flag)}
            >
              <span>{flag ? '收起' : '更多'}</span>
            </p>
          )}
        </Card>
      </div>
    );
  }
}

export default HdlRemark;
